<template>
    <List border size="small" class="list-product">
        <Row slot="header">
            <Col span="2">序号</Col>
            <Col span="4">产品代码</Col>
            <Col span="9">产品名称</Col>
            <Col span="3">数量</Col>
            <Col span="3">单价</Col>
            <Col span="3">操作</Col>
        </Row>
        <ListItem v-if="products.length === 0" class="no-products">
            <div style="text-align: left;">请添加产品</div>
        </ListItem>
        <ListItem v-for="(item, index) in products" :key="index">
            <Row :gutter="10" class="list-item-row">
                <Col span="2">{{index+1}}</Col>
                <Col span="4">{{item.product.sku}}</Col>
                <Col span="9">{{item.product.name}}</Col>
                <Col span="3">
                    <FormItem :label-width="0"
                              :rules="ruleValidate.quantity"
                              :prop="`products.${index}.quantity`">
                        <Input number size="small" v-model="products[index].quantity"></Input>
                    </FormItem>
                </Col>
                <Col span="3">
                    <FormItem :label-width="0"
                              :rules="ruleValidate.price"
                              :prop="`products.${index}.price`">
                        <Input number size="small" v-model="products[index].price"></Input>
                    </FormItem>
                </Col>
                <Col span="3">
                    <FormItem :label-width="0">
                        <Button type="error" size="small" @click="deleteProduct(index)">删除</Button>
                    </FormItem>
                </Col>
            </Row>
        </ListItem>

        <Row slot="footer">
            <Col span="12">
                <FormItem prop="products" :label-width="0">
                    <ButtonGroup>
                        <Button size="small" @click="openComponent('IChooseProduct', {products})">添加商品
                        </Button>
                        <Button size="small" @click="openComponent('ProductImport', {products})">导入商品
                        </Button>
                    </ButtonGroup>
                </FormItem>
            </Col>
        </Row>


        <component v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value"
                   :props="componentProps.props" @on-product-import-choose="productImportChoose"
                   @on-product-choose="productChoose"></component>
    </List>
</template>

<script>

    import IChooseProduct from "../../../../components/form/product/chooseProduct";
    import IContentMixins from "../../../../mixins/iContentMixins";
    import IDrawerMixins from "../../../../mixins/iDrawerMixins";
    import RemoteSelect from "../../../../components/form/remoteSelect";

    export default {
        name: "ProductShowList",
        components: {RemoteSelect, IChooseProduct},
        mixins: [IContentMixins, IDrawerMixins],
        props: {
            value: {
                type: Array
            }
        },
        data() {
            return {
                products: [],
                ruleValidate: {
                    products: [
                        {type: 'array', required: true, message: '至少选择一个产品'}
                    ],
                    quantity: [
                        {type: 'integer', required: true, message: '数量必须填写'},
                        {type: 'integer', min: 1, message: '数量不能小于1'},
                    ],
                    price: [
                        {type: 'number', required: true, message: '单价必须填写'},
                        {
                            type: 'number', validator: (rule, value) => {
                                if (value <= 0) {
                                    return new Error('单价不能小于或等于0');
                                }
                                return true;
                            }
                        }
                    ]
                }
            }
        },
        methods: {
            deleteProduct(index) {
                this.products.splice(index, 1);
                this.emitProduct();
            },
            productChoose(val) {
                let index = this.products.findIndex((item) => item.sku === val.sku);
                if (index === -1) {
                    this.products.push({
                        sku: val.sku,
                        quantity: 0,
                        price: 0,
                        product: val
                    });
                }
                this.emitProduct();
            },
            productImportChoose(val) {
                let index = this.products.findIndex((item) => item.sku === val.sku);
                if (index === -1) {
                    this.products.push(val);
                }
                this.emitProduct();
            },
            emitProduct() {
                this.$emit('input', this.products);
            }
        },
        watch: {
            value(val) {
                val.forEach((item) => {
                    item.sku = item.product.sku;
                });
                this.products = val
            }
        }
    }
</script>

<style lang="less">
    .list-product {
        .no-products {
            color: #c3cbd6;
            text-align: center;
            background-color: #f8f8f9;

            div {
                width: 100%;
            }
        }

        .list-header-right {
            text-align: right;
        }

        .ivu-form-item {
            margin-bottom: 0;
        }

        .list-header {
            border-bottom: 1px solid #e8eaec;
        }

        .list-item-row {
            width: 100%;
        }

        .list-product {
            margin-bottom: 20px;

            .ivu-list-container {
                max-height: 400px;
                overflow-y: auto;
            }

            .list-item-row {
                .list-item-col {
                    line-height: 32px;
                }
            }
        }

        .ivu-list-footer {
            .ivu-form-item-error-tip {
                position: relative !important;
                display: inline-block;
            }
        }
    }
</style>
